<template>
    <div class="box">
        <div class="p-menu flex">
            <div class="p-menu-left flex flex-left">
                <el-input v-model="queryParams.keywords" class="p-i1" placeholder="平台名称" />
                <el-button color="#FABD68" class="p-button" @click="query()">查询</el-button>
            </div>

            <div class="p-menu-right flex flex-right">
                <el-button color="#2CA6E0" class="p-button" @click="setDialogVisible(null)">新建</el-button>
            </div>
        </div>
        <div class="p-ul-box">
            <el-table :data="submitList" style="width: 100%" class="p-ul" v-loading="loading">
                <el-table-column prop="id" label="序号" align="center" />
                <el-table-column prop="name" label="名称" align="center " />

                <el-table-column prop="cover" label="背景图" width="120" :show-overflow-tooltip="true" align="center ">
                    <template #default="scope">
                        <img v-if="scope.row.cover" style="width: 50px; height: 50px" :src="scope.row.icon" />
                        <div v-else>未上传</div>
                    </template>
                </el-table-column>
                <el-table-column prop="icon" label="图标" width="120" :show-overflow-tooltip="true" align="center ">
                    <template #default="scope">
                        <img v-if="scope.row.icon" style="width: 50px; height: 50px" :src="scope.row.icon" />
                        <div v-else>未上传</div>

                        <!-- <image-preview :src="scope.row.icon" :width="50" :height="50" /> -->
                    </template>
                </el-table-column>
                <el-table-column prop="uri" label="链接" width="120" :show-overflow-tooltip="true" align="center " />
                <el-table-column prop="createTime" label="创建时间" align="center " />
                <el-table-column label="操作" align="center ">
                    <template #default="scope">
                        <el-button link type="info" size="small" style="color:black;"
                            @click="setDialogVisible(scope.row)">编辑</el-button>
                        <el-button link type="info" size="small" @click="setEnable(scope.row)"><text
                                :class="scope.row.enable ? 'black' : 'red'">{{ scope.row.enable ? '禁用' : '解禁'
                                }}</text></el-button>
                        <el-button link type="danger" size="small" style="color:red;"
                            @click="deleteById(scope.row.id)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>

        <div class="p-end flex">
            <div class="flex-left">共有{{ total }}项数据</div>
            <el-pagination class="flex-right" style="margin-right:50px;" v-model:current-page="queryParams.page"
                @current-change="currentChange" v-model:page-size="queryParams.size" layout="prev, pager, next, jumper"
                :total="total" />
        </div>

        <!-- 新增or编辑 -->
        <el-dialog v-model="dialogVisible" :title="visibleTitle" width="500px">
            <el-form :model="form" label-width="120px" class="p-form">
                <el-form-item label="系统平台名称">
                    <el-input v-model="form.name" />
                </el-form-item>
                <el-form-item label="系统平台代码">
                    <el-input v-model="form.code" />
                </el-form-item>
                <el-form-item label="上传登录背景">
                    <el-upload class="avatar-uploader" :data="proxy.$fileBackground" name="file"
                        :action="config.baseUrl + proxy.$urlApi.toolkit.upload" :multiple="true"
                        :with-credentials="true" :headers="headers" :show-file-list="false"
                        accept="image/png,image/jpg,image/jpeg" :on-success="handleAvatarSuccessCover">
                        <img v-if="form.cover" :src="form.cover" class="avatar">
                        <div v-else class="flex">+</div>
                    </el-upload>
                </el-form-item>
                <el-form-item label="添加图标">
                    <el-upload class="avatar-uploader" :data="proxy.$fileIcon" name="file"
                        accept="image/png,image/jpg,image/jpeg" :show-file-list="false"
                        :action="config.baseUrl + proxy.$urlApi.toolkit.upload" :on-success="handleAvatarSuccessIcon">
                        <img v-if="form.icon" :src="form.icon" class="avatar">
                        <div v-else class="flex">+</div>
                    </el-upload>
                </el-form-item>
                <el-form-item label="登录页面地址">
                    <el-input v-model="form.uri" />
                </el-form-item>
                <el-form-item label="备注">
                    <el-input v-model="form.remark" />
                </el-form-item>


            </el-form>
            <template #footer>

                <span class="dialog-footer">
                    <el-button @click="dialogVisible = false">取消</el-button>
                    <el-button type="primary" @click="postSubmit">
                        确定
                    </el-button>
                </span>
            </template>
        </el-dialog>



    </div>
</template>
  
<script setup>

import {
    ref,
    getCurrentInstance,
    onMounted,
    computed,
} from "vue";

import { ElMessage } from 'element-plus'
import config from '@/config';
const {
    proxy
} = getCurrentInstance();

const loading = ref(false);

onMounted(() => {
    getSubmitList();
    getUser();
});

const userData = ref({});
const platformName = ref('');

const extraData = ref({
    'type': 'background'
});


const headers = computed(() => {
    let tokenData = localStorage.getItem('TOKENDATA');
    if (tokenData) {
        tokenData = tokenData ? JSON.parse(tokenData) : null;
        return { "Authorization": tokenData.token_type + ' ' + tokenData.access_token };
    } else return {};
})

const queryParams = ref({
    keywords: null,
    name: null,
    code: null,
    uri: null,
    icon: null,
    cover: null,
    remark: null,
    enable: null,
    createTime: null,
    size: 30,
    page: 1,
})

const form = ref({
    name: '',
    region: '',
    date1: '',
    date2: '',
    delivery: false,
    type: [],
    resource: '',
    desc: '',
})

function reset() {//重置数据
    form.value = {
        id: null,
        name: null,
        code: null,
        uri: null,
        icon: null,
        cover: null,
        remark: null,
        enable: 1,
    }
}


function getUser() {
    const savedData = localStorage.getItem('USERINFO');
    const obj = JSON.parse(savedData);
    userData.value = obj;
    if (userData.value.platform != null) {
        platformName.value = userData.value.platform.name;

    }
}
//新增编辑
const dialogVisible = ref(false)
const visibleTitle = ref('');

const submitList = ref([]);//集合数据
const total = ref(0);

//图片上传
function handleAvatarSuccessCover(res,file){
    if (res.code == 200) {
        form.value.cover = res.data;
    } else {
        ElMessage({
            message: res.msg,
            type: 'error',
        })
    }
}
//图片上传
function handleAvatarSuccessIcon(res, file) {
    if (res.code == 200) {
        form.value.icon = res.data;
    } else {
        ElMessage({
            message: res.msg,
            type: 'error',
        })
    }
}

function beforeAvatarUpload(file) {
    return isJPG && isLt2M;
}


function beforeUpload(file) {
    console.log(file);
    // const data = {
    //     url: 'background',
    //     files:file,
    // }
    // proxy.$Request.post(proxy.$urlApi.toolkit.upload, data)
    //     .then((res) => {
    //     }).catch(error => {
    //         // 处理 Promise 拒绝的情况
    //         // console.error(error); // 输出错误信息
    //     });
}

//新增or编辑

function setDialogVisible(index) {
    if (index == null) {
        reset();
        visibleTitle.value = "新增系统平台"
    } else {
        form.value = {
            code: index.code,
            cover: index.cover,
            enable: index.enable,
            icon: index.icon,
            id: index.id,
            name: index.name,
            remark: index.remark,
            uri: index.uri,
        };
        visibleTitle.value = "编辑系统平台"
    }
    dialogVisible.value = true;
}

function postSubmit() {//提交
    proxy.$Request.post(proxy.$urlApi.platform.submit, form.value)
        .then((res) => {
            if (res.data.code == 200) {
                ElMessage({
                    message: form.value.name + '提交完成',
                    type: 'success',
                })
                dialogVisible.value = false;
            } else {
                ElMessage({
                    message: res.data.msg,
                    type: 'error',
                })
            }


        }).catch(error => {
            // 处理 Promise 拒绝的情况
            // console.error(error); // 输出错误信息
        });
}
function getSubmitList() {//获取列表数据
    const data = queryParams.value;
    // loading.value = true;
    proxy.$Request.get(proxy.$urlApi.platform.pagelist, data)
        .then((res) => {
            total.value = res.data.data.total;
            submitList.value = res.data.data.list;
            total.value = submitList.value.length;
            loading.value = false;
        }).catch(error => {
            // 处理 Promise 拒绝的情况
            // console.error(error); // 输出错误信息
            loading.value = false;
        });
}

function query() {
    queryParams.value.page = 1;
    getSubmitList();
}




//启动状态修改
function setEnable(row) {
    loading.value = true;
    const data = {
        id: row.id,
        enable: !row.enable
    }
    proxy.$Request.post(proxy.$urlApi.platform.enable, data)
        .then((res) => {
            if (res.data.code == 200) {
                getSubmitList();
                ElMessage({
                    message: '修改完成',
                    type: 'success',
                })
            } else {
                ElMessage({
                    message: res.data.msg,
                    type: 'error',
                })
            }

            loading.value = false;
        }).catch(error => {
            // 处理 Promise 拒绝的情况
            // console.error(error); // 输出错误信息
            loading.value = false;
        });
}




//删除
function deleteById(id) {
    loading.value = true;
    const data = {
        id: id,
    }
    proxy.$Request.delete(proxy.$urlApi.platform.delete, data)
        .then((res) => {
            if (res.data.code == 200) {
                getSubmitList();
                ElMessage({
                    message: '删除完成',
                    type: 'success',
                })
            } else {
                ElMessage({
                    message: res.data.msg,
                    type: 'error',
                })
            }

            loading.value = false;
        }).catch(error => {
            // 处理 Promise 拒绝的情况
            // console.error(error); // 输出错误信息
            loading.value = false;
        });
}


//分页
function currentChange(num) {
    queryParams.value.page = num;
    getSubmitList();
}

</script>

  
<style lang="scss">
.p-menu {
    background: #F9FAFA;
    margin: 30px;
    height: 40px;
    // width:100%;
}

.p-i1,
.p-i2 {
    margin-right: 10px;
    color: black;
    height: 40px;

}

.p-i2 .el-input__wrapper {
    height: 38px;
    width: 194px;
    margin-right: 10px;
    color: black;
}

.p-i1 {
    width: 271.49px;
}


.p-button {
    color: white;
    width: 92px;
    height: 40px;
}

.el-input__inner::placeholder {
    color: #999 !important;
}


.el-form .el-upload {
    margin-left: 10px;
    width: 100px;
    height: 100px;
}

.p-ul-box {
    padding: 0 30px;
}

//列表
.el-table__inner-wrapper {
    height: calc(100vh - 300px);
}

.is-leaf.el-table__cell {
    background: #E7F0F3 !important;

}

.el-table__cell {
    white-space: nowrap;
    /* 防止文本换行 */
    overflow: hidden;
    /* 超出部分隐藏 */
}

.cell {
    white-space: nowrap;
    /* 防止文本换行 */
    overflow: hidden;
    /* 超出部分隐藏 */
}

.el-table__row:nth-child(odd) {
    background-color: #FFFFFF;
    /*奇数行的背景颜色*/
}

.el-table__row:nth-child(even) {
    background-color: #F9FAFA;
    /*偶数行的背景颜色*/
}



.p-end {
    font-size: 10px;
    padding-left: 30px;
    color: #9A9DAA;
    margin-top: 20px;
}

.el-dialog__header {
    font-size: 16px;
}

.el-dialog__footer {
    font-size: 16px;
}

.el-input__wrapper {
    font-size: 16px;
}

.avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

.avatar-uploader .el-upload:hover {
    border-color: #409EFF;
}

.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
}

.avatar {
    width: 178px;
    height: 178px;
    display: block;
}
</style>
  
